<template>
  <!-- 管理页面 -->
  <div class="manage-box">
    <!-- -------------------任务列表------------------ -->
    <div class="taskList-box" v-if="taskList.length">
        <ul v-for="(item,tindex) in taskList" :key="tindex">
            <!-- ----------日期---------- -->
            <div class="date_item">{{item.group}} ({{getWeekName(item.group)}})</div>

            <!-- 每一条任务 -->
            <template v-if="item.children.length">
                <li v-for="(task,index) in item.children" :key="index" :class="getTaskClass(task,index)" @click="clickOpenTaskPop(task)">
                <!-- 点击的区域 -->
                <div class="item-box">
                    <!-- <svg-icon icon-class="taskL" /> -->
                    <div class="item-right">
                        <!-- 标题 -->
                        <div class="item-title">
                            <h3>{{task.name}}</h3>
                            <!-- <i class="el-icon-arrow-right"></i> -->
                        </div>
                        <!-- 时间 -->
                        <div class="item-time">
                            <span class="name">目标：{{task.targetName}}&nbsp;&nbsp;&nbsp; 执行：{{task.principalName}}</span>
                        </div>
                    </div>
                </div>
                <!-- 已完成和已取消显示的图标 -->
                <div class="okOrCancel" >
                    <!-- v-if="getTaskIcon(task)" -->
                    <!-- 已完成 -->
                    <svg-icon class="isOkOrCancel" icon-class="isOk"  v-if="getTaskOkIcon(task)"/>
                    <!-- 已取消 -->
                    <svg-icon class="isOkOrCancel" icon-class="isCancel" v-else-if="getTaskCancelIcon(task)"/>
                </div>
                </li>
            </template>
            <!-- 无数据 -->
            <div class="linoData-box" v-else>
                <p>当天暂无任务</p>
            </div>
        </ul>
    </div>
    <!-- -------------------任务列表------------------end -->

    <!-- 全部无数据 -->
    <div class="noData-box" v-else>
        <img src="~@/assets/images/wjg_img@2x.png" alt="">
        <p>暂无数据</p>
    </div>

    <!-- ------------------底部按钮------------------ -->
    <div class="cale-bottom">
        <!-- 显示的数量 -->
        <div class="statsNum">
            <span>任务总数：{{getTotal()}}</span>
            <span>未完成：{{getUnfinished()}}</span>
            <span>已完成：{{getFinished()}}</span>
            <svg-icon icon-class="stats_icon" @click="openStats"/>
        </div>
    </div>
    <!-- ------------------底部按钮------------------end -->

    <!-- 编辑任务的弹窗 -->
    <el-drawer :title="editObj.id ? '编辑任务' : '创建任务'" size="40%" :visible.sync="editTaskDrawer" popper-class="cardEdit" :modal-append-to-body="false">
      <EditTask ref="addTask" :editObj="editObj" @reqOrClose="reqOrClose"></EditTask>
    </el-drawer>

    <!-- ------------------------统计和设置------------------------ -->
    <el-drawer title="统计" size="35%" :visible.sync="statsDrawer" popper-class="statsOrSet" :modal-append-to-body="false">
        <Stats ref="statsRef" @statsEmit="statsEmit"></Stats>
    </el-drawer>
    <!-- ------------------------统计和设置------------------------end -->
  </div>
</template>

<script>
import {getServiceActionTaskListApi} from "@/BMViews/api/service/actionTask.js";
import EditTask from "@/BMViews/views/knownAction/table/addTask.vue"
import Stats from "@/BMViews/views/knownAction/manage/stats/index.vue"
export default {
    name: "manage",
    components:{
        EditTask,
        Stats
    },
    data(){
        return{
            taskList: [], //任务列表

            // 创建任务的数据
            editTaskDrawer: false, //编辑任务抽屉显示隐藏
            editObj: {},//当前编辑的这个任务

            statsDrawer: false, //统计和设置抽屉显示隐藏
        }
    },
    methods:{
        // ----------------------------任务列表---------------------------
        // 获取当前是周几
        getWeekName(date){
            let weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
            let time = new Date(date);
            let day = time.getDay();
            return weeks[day];
        },

        // 打开编辑任务的弹窗
        clickOpenTaskPop(item){
            this.editObj = item
            this.editTaskDrawer = true
        },

        // 不同类型获取的class背景不同
        getTaskClass(item,index){
            // 不同类型获取的class背景不同
            const stateMap = {
                1: "career",
                2: "friend",
                0: "health",
            };
            console.log(item.todayStatus,'------------');
            // 判断状态 已完成和已取消
            let status = ''
            if(item.repeatDays=='-1'){
                status = item.status
            }else{
                status = item.todayStatus
            }
            if(status=='2'||status=='-1'){
                console.log(stateMap[index % 3] + " " + "isLight",'111111111111');
                return stateMap[index % 3] + " " + "isLight"
            }else{
                return stateMap[index % 3]
            }
        },

        // 获取已完成的显示图标
        getTaskOkIcon(item){
            if(item.repeatDays=='-1'){
                // 不重复
                return item.status=='2'
            }else{
                // 重复
                return item.todayStatus=='2'
            }
        },

        // 获取已取消的显示图标
        getTaskCancelIcon(item){
            if(item.repeatDays=='-1'){
                // 不重复
                return item.status=='-1' || item.todayStatus == '-1'
            }else{
                // 重复
                return item.todayStatus=='-1' || item.status=='-1'
            }
        },

        // 编辑任务 刷新列表并且关闭弹出框
        reqOrClose() {
            this.editTaskDrawer = false //关闭编辑弹出框
            this.editObj = {} //清空编辑的对象
        },

        // 获取任务总数
        getTotal(){
            let sum = 0
            this.taskList.forEach(item=>{
                sum = sum + item.children.length
            })
            return sum
        },
        
        // 获取未完成的数量
        getFinished(){
            let sum = 0
            this.taskList.forEach(item=>{
                item.children.forEach(k=>{
                let status = ''
                if (k.repeatDays == '-1') {
                    status = k.status
                } else {
                    status = k.todayStatus
                }
                if (status == '2' || status == '-1') sum = sum+1
                })
            })
            return sum
        },
        
        // 获取已完成的数量
        getUnfinished(){
            let total = this.getTotal()
            let finished = this.getFinished()
            return total-finished
        },
        // ----------------------------任务列表---------------------------end

        // 底部点击打开统计
        openStats(){
            this.statsDrawer = true //显示抽屉
            this.$nextTick(()=>{
                this.$refs.statsRef.openCountRef() //初始化调用
            })
        },

        // 统计页面查询
        statsEmit(userList,dateList){
            console.log(userList,dateList,'kkkkkkkkkkkkkkkkkk');
            // -----------------整理数据-----------------
            let data = {
                circleId: this.$store.state.user.userInfo.whereCircleId,//当前圈子
            }
            let user = []
            userList.forEach(item=> user.push(item))
            console.log(user,'统计页面查询');
            data.userList = user.join(',')
            // -----------------整理数据-----------------end
            // 循环调用任务请求
            this.taskList = [] //先清空列表
            dateList.forEach(date=>{
                data.taskDay = date //日期
                this.getTaskListFn(data,date) //查询任务列表
            })
            this.statsDrawer = false //关闭抽屉
        },

        // 查询统计的列表
        async getTaskListFn(data,date){
            let result = await getServiceActionTaskListApi(data)
            if(result.code==200){
                // 把数据组和日期加进去
                this.taskList.push({
                    group: date,
                    children: result.rows || []
                })
                // 按照日期排序 a.group - b.group
                this.taskList = this.taskList.sort((a, b) => {
                    let ar = a.group.replace(/\-/g,'/') 
                    let br = b.group.replace(/\-/g,'/') 
                    return new Date(ar).getTime() - new Date(br).getTime()
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>